<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="dist/permeate.min.css" rel="stylesheet">
    <link href="font/material-icons.css" rel="stylesheet">
</head>

<body>
    <header class="nav-bar is-default">
        <div class="nav container">
            <div class="nav-brand">
                Permeate
            </div>
            <ul class="nav-list">
                <li class="list-item">
                    <a class="item-link is-active" href="#">首页</a>
                </li>
                <li class="list-item">
                    <a class="item-link" href="#">门户</a>
                </li>
            </ul>
            <ul class="nav-list nav-list-right">
                <li class="list-item">
                    <form>
                        <label class="search">
                            <input class="form-input" type="text" placeholder="搜索板块">
                            <a role="button">
                                <i class="material-icons search-icon">search</i>
                            </a>
                        </label>
                    </form>
                </li>
                <li class="list-item">
                    <a class="item-link" href="#">消息</a>
                </li>
                <li class="list-item">
                    <a class="item-link" href="#">提醒</a>
                </li>
                <li class="list-item">
                    <a class="user-link" href="#">
                        <img class="user-img" src="images/user-img.jpg" alt="">
                        <span><small>XXX用户</small></span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="nav-secondary">
            <div class="container">
                <!--路径导航-->
                <ul class="route-guidance">
                    <li class="guidance-item">
                        <span>首页</span>
                    </li>
                    <li class="guidance-item">
                        <a href="#">门户</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <section class="section">
        <div class="container">
            <div class="paper">
                <div class="paper-header">
                    设置
                </div>
                <div class="paper-body" style="min-height: 500px;">
                    <div class="row">
                        <div class="col-lg-2">
                            <menu class="menu">
                                <ul class="menu-list">
                                    <li class="menu-list-item">
                                        <a class="menu-list-link" href="#">修改头像</a>
                                    </li>
                                    <li class="menu-list-item">
                                        <a class="menu-list-link" href="#">个人资料</a>
                                    </li>
                                    <li class="menu-list-item">
                                        <a class="menu-list-link is-active" href="#">密码安全</a>
                                    </li>
                                </ul>
                            </menu>
                        </div>
                        <div class="col-lg-6">
                            <form>
                                <div class="form-group row">
                                    <label class="col-3 form-label text-right">
                                        <span>旧密码</span>
                                    </label>
                                    <div class="col-9">
                                        <input class="form-input" type="text" name="" value="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 form-label text-right">
                                        <span>新密码</span>
                                    </label>
                                    <div class="col-9">
                                        <input class="form-input" type="text" name="" value="">
                                        <p class="form-prompt"><small>如不需要更改密码，此处请留空</small></p>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 form-label text-right">
                                        <span>确认新密码</span>
                                    </label>
                                    <div class="col-9">
                                        <input class="form-input" type="text" name="" value="">
                                        <p class="form-prompt"><small>如不需要更改密码，此处请留空</small></p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" type="button">确认修改</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </section>
</body>

</html>